<template>
  <div ref="chart" class="charts chart-pie"></div>
</template>
<script>
export default {
  name: 'Semicircle',
  props: {
    satisdata: {
      type: Array
    }
  },
  watch: {
    satisdata(newVal) {
      this.satisdata = newVal
      this.getEchartData()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getEchartData()
    })
  },
  methods: {
    getEchartData() {
      const chart = this.$refs.chart
      var scale = 1
      const namedata = []
      for (var i = 0; i < this.satisdata.length; i++) {
        namedata.push(this.satisdata[i].name)
      }
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          tooltip: {
            show: true,
            trigger: 'item'
          },
          legend: {
            type: 'scroll',
            x: 'center',
            top: '80%',
            itemWidth: 20,
            itemHeight: 12,
            itemGap: 5,
            selectedMode: false,
            icon: 'circle',
            data: namedata,
            textStyle: {
              color: 'rgb(127, 127, 127)',
              fontSize: 12
            }
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['45%', '35%'],
              center: ['48%', '40%'],
              color: ['#3CBDD0', '#3B71DA', '#E2AB56'],
              label: {
                normal: {
                  formatter: '{b|{b}}\n{hr|}\n{c|{c}%}',
                  rich: {
                    b: {
                      fontSize: 12,
                      color: 'rgb(127, 127, 127)',
                      align: 'center',
                      padding: -10
                    },
                    c: {
                      fontSize: 15,
                      align: 'center',
                      padding: 4,
                      color: '#000'
                    }
                  }
                }
              },
              labelLine: {
                normal: {
                  length: 20 * scale,
                  length2: 30
                }
              },
              data: this.satisdata,
              roundCap: 1
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      }
    }
  }
}
</script>

<style scoped>
.charts {
  width: 100%;
  height: 90%;
}
</style>
